<?php 
include_once "conexion.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Sitio de Reportes</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
	<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
	<!--script src="js/less-1.3.3.min.js"></script-->
	<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
	<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
	
	<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />

	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">	
	

	<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
    	<link rel="shortcut icon" href="img/favicon.ico">

    
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>

    <!-- BEGIN GRAFICAS -->
    <link class="include" rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css" href="css/examples.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />


    <!-- Don't touch this! -->


    <script class="include" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
    <!-- End Don't touch this! -->

    <!-- Additional plugins go here -->
    <script class="include" type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
    <script class="include" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="plugins/jqplot.logAxisRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
    <!-- End additional plugins -->

    <!-- END GRAFICAS-->


    <!--BEGIN SCRIPTS/CSS GRAFICOS -->
    <!-- css's -->
    <link class="include" rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css" href="css/examples.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />

    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
    <script class="include" type="text/javascript" src="js/jquery.min.ie.js"></script>
    <!-- END SCRIPTS/CSS GRAFICOS -->
    <style>
    	/* Set the fixed height of the footer here */
    	#push,
    	#footer {
    		height: 60px;
    	}
    	#footer {
    		background-color: #eee;
    	}

    	/* Lastly, apply responsive CSS fixes as necessary */
    	@media (max-width: 767px) {
    		#footer {
    			margin-left: -20px;
    			margin-right: -20px;
    			padding-left: 20px;
    			padding-right: 20px;
    		}
    	}
    </style>
</head>

<body>
	<div class="container">
		<button onClick="window.print()">Print this page</button>
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div class="page-header">
					<h1>
						Demo Reportes <small>Demo, Version 1.0</small>
					</h1>
				</div>
				<div class="tabbable" id="tabs-572768">
					<ul class="nav nav-tabs">
						<li class="active">
							<a href="#tab-linea1" data-toggle="tab">Linea 1</a>
						</li>
						<li>
							<a href="#tab-linea2" data-toggle="tab">Linea 2</a>
						</li>
						<li>
							<a href="#tab-linea3" data-toggle="tab">Linea 3</a>
						</li>
						<li>
							<a href="#tab-linea4" data-toggle="tab">Linea 4</a>
						</li>
						<li>
							<a href="#tab-linea5" data-toggle="tab">Linea 5</a>
						</li>
						<li>
							<a href="#tab-linea6" data-toggle="tab">Linea 6</a>
						</li>
						<li>
							<a href="#tab-linea7" data-toggle="tab">Linea 7</a>
						</li>
					</ul>
					<div class="tab-content">
						<!-- Begin TAB LINEA 1-->
						<div class="tab-pane active" id="tab-linea1">							
							<!-- BEGIN TABBED DE MAQUINAS EN LINEA 1-->
							<div class="tabbable" id="tabbedLinea1Maquina1">
								<ul class="nav nav-tabs">
									<li class="active">
										<a href="#tab-linea1-maquina1" data-toggle="tab">Maquina 1</a>
									</li>
									<li>
										<a href="#tab-linea1-maquina2" data-toggle="tab">Maquina 2</a>
									</li>
									<li>
										<a href="#tab-linea1-maquina3" data-toggle="tab">Maquina 3</a>
									</li>
									<li>
										<a href="#tab-linea1-maquina4" data-toggle="tab">Maquina 4</a>
									</li>
									<li>
										<a href="#tab-linea1-maquina5" data-toggle="tab">Maquina 5</a>
									</li>						
								</ul>
								<div class="tab-content">
									<!-- Begin TAB LINEA 1-->
									<div class="tab-pane active" id="tab-linea1-maquina1">							
							<!-- <p>
								Contenido Maquina 1
							</p> -->
							<!-- BEGIN CONTENIDO LINEA 1, MAQUINA 1 -->
							<div class="row clearfix">
								<div class="col-md-7 column">
									<div class="panel panel-primary">
										<div class="panel-heading">
											<h3 class="panel-title">
												Grafica
											</h3>
										</div>
										<div class="panel-body">
											<!-- La grafica va justo aca... -->
											<div class="container">
												<div id="chart1" style="padding-left: 5px; padding-right: 5px; width:550px; height:400px;"></div>
											</div>	
											<script class="code" type="text/javascript">$(document).ready(function(){
												$.jqplot.config.enablePlugins = true;
												<?php if ($conn) {
													$array12 = "";
													$temp;
													//DE 00 A 01 HRS
													$sql = "select AVG(CAST(tabla_TC15KM1A.MAQ_1ATC15K_VEL_INSTANT_M1ATC15K as int))
															from tabla_TC15KM1A where tabla_TC15KM1A.DateTime between '2013-11-25 11:00:00.000' and '2013-11-25 12:00:00.000'";
													$stmt = sqlsrv_query( $conn, $sql );
													if( $stmt === false) {
														die( print_r( sqlsrv_errors(), true) );
													}

													while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) ) {
														$temp = $row[0];
														break;
													}
													sqlsrv_free_stmt( $stmt);
													if($temp == null){
														$array12 = "0,";
													}else{
														$array12 = $temp . ",";
													}


													//DE 01 A 02 HRS
													$sql = "select AVG(CAST(tabla_TC15KM1A.MAQ_1ATC15K_VEL_INSTANT_M1ATC15K as int))
															from tabla_TC15KM1A where tabla_TC15KM1A.DateTime between '2013-11-25 12:00:00.000' and '2013-11-25 13:00:00.000'";
													$stmt = sqlsrv_query( $conn, $sql );
													if( $stmt === false) {
														die( print_r( sqlsrv_errors(), true) );
													}

													while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) ) {
														$temp = $row[0];
														break;
													}
													sqlsrv_free_stmt( $stmt);
													if($temp == null){
														$array12 = $array12. "0,";
													}else{
														$array12 = $array12. $temp . ",";
													}

													//DE 02 A 03 HRS
													$sql = "select AVG(CAST(tabla_TC15KM1A.MAQ_1ATC15K_VEL_INSTANT_M1ATC15K as int))
															from tabla_TC15KM1A where tabla_TC15KM1A.DateTime between '2013-11-25 13:00:00.000' and '2013-11-25 14:00:00.000'";
													$stmt = sqlsrv_query( $conn, $sql );
													if( $stmt === false) {
														die( print_r( sqlsrv_errors(), true) );
													}

													while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) ) {
														$temp = $row[0];
														break;
													}
													sqlsrv_free_stmt( $stmt);
													if($temp == null){
														$array12 = $array12. "0,";
													}else{
														$array12 = $array12. $temp . ",";
													}

													//DE 03 A 04 HRS
													$sql = "select AVG(CAST(tabla_TC15KM1A.MAQ_1ATC15K_VEL_INSTANT_M1ATC15K as int))
															from tabla_TC15KM1A where tabla_TC15KM1A.DateTime between '2013-11-25 14:00:00.000' and '2013-11-25 15:00:00.000'";
													$stmt = sqlsrv_query( $conn, $sql );
													if( $stmt === false) {
														die( print_r( sqlsrv_errors(), true) );
													}

													while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) ) {
														$temp = $row[0];
														break;
													}
													sqlsrv_free_stmt( $stmt);
													if($temp == null){
														$array12 = $array12. "0,";
													}else{
														$array12 = $array12. $temp . ",";
													}

													//DE 04 A 05 HRS
													$sql = "select AVG(CAST(tabla_TC15KM1A.MAQ_1ATC15K_VEL_INSTANT_M1ATC15K as int))
															from tabla_TC15KM1A where tabla_TC15KM1A.DateTime between '2013-11-25 15:00:00.000' and '2013-11-25 16:00:00.000'";
													$stmt = sqlsrv_query( $conn, $sql );
													if( $stmt === false) {
														die( print_r( sqlsrv_errors(), true) );
													}

													while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) ) {
														$temp = $row[0];
														break;
													}
													sqlsrv_free_stmt( $stmt);
													if($temp == null){
														$array12 = $array12. "0,";
													}else{
														$array12 = $array12. $temp . ",";
													}

													//DE 05 A 06 HRS
													$sql = "select AVG(CAST(tabla_TC15KM1A.MAQ_1ATC15K_VEL_INSTANT_M1ATC15K as int))
															from tabla_TC15KM1A where tabla_TC15KM1A.DateTime between '2013-11-25 16:00:00.000' and '2013-11-25 17:00:00.000'";
													$stmt = sqlsrv_query( $conn, $sql );
													if( $stmt === false) {
														die( print_r( sqlsrv_errors(), true) );
													}

													while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) ) {
														$temp = $row[0];
														break;
													}
													sqlsrv_free_stmt( $stmt);
													if($temp == null){
														$array12 = $array12. "0,";
													}else{
														$array12 = $array12. $temp . ",";
													}

													
													//DE 06 A 07 HRS
													$sql = "select AVG(CAST(tabla_TC15KM1A.MAQ_1ATC15K_VEL_INSTANT_M1ATC15K as int))
															from tabla_TC15KM1A where tabla_TC15KM1A.DateTime between '2013-11-25 17:00:00.000' and '2013-11-25 18:00:00.000'";
													$stmt = sqlsrv_query( $conn, $sql );
													if( $stmt === false) {
														die( print_r( sqlsrv_errors(), true) );
													}

													while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) ) {
														$temp = $row[0];
														break;
													}
													sqlsrv_free_stmt( $stmt);
													if($temp == null){
														$array12 = $array12;
													}else{
														$array12 = $array12. $temp;
													}

													


												}else{
													echo "Error in Connection. check the connection to de database.";
												} 
												?>
												var s1 = [<?php echo $array12; ?>];
												var ticks = ["00:00 - 01:00 hrs","01:00 - 02:00 hrs","02:00 - 03:00 hrs","03:00 - 04:00 hrs","04:00 - 05:00 hrs","05:00 - 06:00 hrs","06:00 - 07:00 hrs"];
												
												plot1 = $.jqplot('chart1', [s1], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
            	renderer:$.jqplot.BarRenderer,
            	pointLabels: { show: true }
            },
            axes: {
            	xaxis: {
            		renderer: $.jqplot.CategoryAxisRenderer,
            		ticks: ticks
            	}
            },
            highlighter: { show: false }
        });
												
												$('#chart1').bind('jqplotDataClick', 
													function (ev, seriesIndex, pointIndex, data) {
														$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
													}
													);
											});
</script>
</div>
<div class="panel-footer">
	alguna metadata sobre la grafica (fecha, hora, descripcion, etc)
</div>
</div>
</div>
<div class="col-md-5 column">
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">
				Estadisticas
			</h3>
		</div>
		<div class="panel-body">											
			<table class="table table-striped">
				<thead>
					<tr>
						<th>
							Estadistica
						</th>
						<th>
							Valor
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>								
						<td>
							Velocidad Promedio
						</td>
						<td>
							36
						</td>								
					</tr>
					<tr class="active">								
						<td>
							Unidades Producidas
						</td>
						<td>
							967
						</td>								
					</tr>
					<tr class="success">								
						<td>
							Unidades Desperdicio
						</td>
						<td>
							78
						</td>								
					</tr>
					<tr class="warning">								
						<td>
							Numero de Paros
						</td>
						<td>
							100
						</td>								
					</tr>
					<tr class="danger">								
						<td>
							Tiempo Muerto en Minutos
						</td>
						<td>
							300
						</td>								
					</tr>
					<tr>								
						<td>
							Tiempo Muerto en Segundos
						</td>
						<td>
							18000
						</td>								
					</tr>
				</tbody>
			</table>
		</div>
		<div class="panel-footer">
			Descripcion de las estadisticas
		</div>
	</div>
</div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">
			Detalle de datos
		</h3>
	</div>
	<div class="panel-body">
		Ver detalle de datos... &lt;a href="detalle.php?idDatos=#"&gt; &lt;/a&gt;
	</div>
	<div class="panel-footer">
		Descripcion de detalle de datos.
	</div>
</div>
<!-- END CONTENIDO LINEA 1, MAQUINA 1 -->
</div>
<!-- END TAB 1-->
<div class="tab-pane" id="tab-linea1-maquina2">
	<p>
		Contenido Maquina 2
	</p>
</div>
<div class="tab-pane" id="tab-linea1-maquina3">
	<p>
		Contenido Maquina 3
	</p>
</div>
<div class="tab-pane" id="tab-linea1-maquina4">
	<p>
		Contenido Maquina 4
	</p>
</div>
<div class="tab-pane" id="tab-linea1-maquina5">
	<p>
		Contenido Maquina 5
	</p>
</div>
</div>
</div>
<!-- END TABBED DE MAQUINAS EN LINEA 1 -->
</div>
<!-- END TAB 1-->
<div class="tab-pane" id="tab-linea2">
	<p>
		Linea 2
	</p>
</div>
<div class="tab-pane" id="tab-linea3">
	<p>
		Linea 3
	</p>
</div>
<div class="tab-pane" id="tab-linea4">
	<p>
		Linea 4
	</p>
</div>
<div class="tab-pane" id="tab-linea5">
	<p>
		Linea 5
	</p>
</div>
<div class="tab-pane" id="tab-linea6">
	<p>
		Linea 6
	</p>
</div>
<div class="tab-pane" id="tab-linea7">
	<p>
		Linea 7
	</p>
</div>
</div>
</div>			
</div>
</div>
</div>
<div id="footer">
	<div class="container">
		<p class="muted credit">
			Prototipo, Reporteria FritoLay 2013
		</p>
	</div>
</div>
<!-- Don't touch this! -->


<script class="include" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<!-- Additional plugins go here -->

<script class="include" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script class="include" type="text/javascript" src="plugins/jqplot.pieRenderer.min.js"></script>
<script class="include" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>

<!-- End additional plugins -->

<script type="text/javascript" src="js/example.min.js"></script>
</body>
</html>